1 00:00:00,540 --> 00:00:01,510 Hello and welcome. 2 00:00:01,530 --> 00:00:11,470 In this Lakeshore we are going to be styling are hastier mail that we created for our app. 3 00:00:11,580 --> 00:00:14,010 So I mean hi my text editor. 4 00:00:14,130 --> 00:00:14,910 This is v. 5 00:00:14,940 --> 00:00:15,780 Here's his file. 6 00:00:15,780 --> 00:00:21,390 So this is where we're going to define the stylin for our help. 7 00:00:21,390 --> 00:00:26,190 So we're gonna use the I.D. where we've got I.D. to use. 8 00:00:26,280 --> 00:00:32,220 If not we'll use the chalk elements to see how the his team. 9 00:00:33,120 --> 00:00:39,640 I have had some basic styling here for the body of our all here mail. 10 00:00:39,640 --> 00:00:43,320 So this style would be applied to the body where you're smiling. 11 00:00:43,320 --> 00:00:45,150 You need to have a selector. 12 00:00:45,300 --> 00:00:47,460 In this case the body is the selector. 13 00:00:47,600 --> 00:00:55,820 And then in between the curly braces this one and this one here you specify the propertys and value. 14 00:00:55,950 --> 00:00:58,610 You want to apply to the selector. 15 00:00:58,860 --> 00:01:06,480 So in this case I have got several properties here and the text align is a prop. And I want the text 16 00:01:06,480 --> 00:01:11,120 to be centred quite a property called background colour. 17 00:01:11,310 --> 00:01:14,920 And I give it a hex value background colour. 18 00:01:14,970 --> 00:01:20,550 You don't have to use hex value for example if you know the actual colour name you could specify that 19 00:01:20,940 --> 00:01:23,200 in place of the hex value. 20 00:01:23,520 --> 00:01:30,120 Here game carlaw as both fire why this column here refers to the colour of the text you use for the 21 00:01:30,120 --> 00:01:35,920 body not the actual not the actual background. 22 00:01:36,120 --> 00:01:42,870 Okay if you want to background colour you need to specify background colour font family refers to the 23 00:01:42,870 --> 00:01:45,630 font the type of font that you can use. 24 00:01:45,630 --> 00:01:48,900 It's always good to specify more than one. 25 00:01:49,140 --> 00:01:59,580 So I'll just add a trio just in case the first font is not available on the machine that is viewing 26 00:01:59,580 --> 00:02:02,930 this page so it can default to the other one. 27 00:02:02,940 --> 00:02:05,920 So what I'm seeing here this is my first choice. 28 00:02:06,010 --> 00:02:14,340 That font is now available would default to that someone's computers should have either both or either. 29 00:02:14,370 --> 00:02:20,690 I had read a chunk of stylin from line 8 here to line 18. 30 00:02:20,700 --> 00:02:30,010 Notice here I used the idea I attribute this idea here is derived from this hi deep inside here. 31 00:02:31,050 --> 00:02:32,250 We've got an idea here. 32 00:02:32,250 --> 00:02:33,270 Quad pad. 33 00:02:33,320 --> 00:02:38,760 That's the idea I am referring to here or at last their target. 34 00:02:38,790 --> 00:02:45,440 These are the propertys and standard values so you separate the property from the value with a colon. 35 00:02:45,720 --> 00:02:54,960 Okay so again this is the idee style in the bag Tranquillo I've given it red border set to zero. 36 00:02:54,960 --> 00:03:02,840 I don't want a border carlaw is white which is a colour Ah that picture frame a colour of text padding 37 00:03:03,000 --> 00:03:03,870 Okay padding. 38 00:03:03,950 --> 00:03:09,510 Is this space inside the element while margin is the space outside it. 39 00:03:09,510 --> 00:03:16,470 So these are values are specified for the padding cursor the cursor property physically specifies the 40 00:03:16,500 --> 00:03:22,860 type of cursor to be displayed when Point in on an element as well. 41 00:03:22,860 --> 00:03:29,790 That is I've just said pointer margene again refers to displace alcides What I'm seeing here from the 42 00:03:29,790 --> 00:03:36,750 top how one are one you want there to be is space 35 pixels from the top. 43 00:03:36,750 --> 00:03:39,140 That's what that means. 44 00:03:40,500 --> 00:03:45,270 I have added some more stylin from line 19 to 25. 45 00:03:45,480 --> 00:03:52,950 And this time I stylin a class so if you got a dot followed by a name that is their class so I'm still 46 00:03:52,950 --> 00:03:53,710 in a class. 47 00:03:53,730 --> 00:03:59,240 This class will be added automatically with our javascript. 48 00:03:59,360 --> 00:04:04,350 I'm just preparing this dialling for that beforehand. 49 00:04:04,350 --> 00:04:08,280 So again the class here is the selector. 50 00:04:08,600 --> 00:04:11,340 The property marjean Same from the top. 51 00:04:11,340 --> 00:04:19,990 Our one week to drop 13 picasso's background Calli said that 2 x colour x value float means floor. 52 00:04:20,010 --> 00:04:24,910 Basically if you got in means a want the elemental move to the right. 53 00:04:25,080 --> 00:04:28,110 Okay where you have elma's moving to the right. 54 00:04:28,110 --> 00:04:32,870 You need to also specify a clip so we use float you need to use Claire. 55 00:04:32,910 --> 00:04:41,670 CLAIRE basically is used to clear any obstruction on either side and then the background column. 56 00:04:42,060 --> 00:04:49,500 So he got padding padding refers to the space inside time same space inside from the right and wanted 57 00:04:49,500 --> 00:04:51,390 to move 20 pieces. 58 00:04:51,440 --> 00:04:54,490 Body radios is swards gives the around it corner. 59 00:04:54,510 --> 00:04:59,660 So if you've got a square by their radius can lives mix it around a bit so that's why. 60 00:04:59,960 --> 00:05:08,060 Read just property does all right to find it a couple of more properties to this class here. 61 00:05:08,180 --> 00:05:14,240 Give me a whiff of 60 pixels and a height of 20 pixels. 62 00:05:14,620 --> 00:05:21,780 By Does Tal I've said it to none so that there are no shadows or nothing on the borders. 63 00:05:21,780 --> 00:05:27,280 I've added some more stylin to this Heidi called wrap up week. 64 00:05:27,320 --> 00:05:34,080 If we go into our hastier mail here we'll see that we've got a deal here called wrapper which is the 65 00:05:34,120 --> 00:05:35,150 main Deve. 66 00:05:35,160 --> 00:05:36,130 Does he want. 67 00:05:36,130 --> 00:05:38,040 I'm targeting here. 68 00:05:38,190 --> 00:05:41,730 These are this dilon up apply to that idea. 69 00:05:41,960 --> 00:05:42,990 I gained the weight. 70 00:05:43,040 --> 00:05:49,660 I've said it with for 50 pixels a background colour and giving it a hex value. 71 00:05:49,890 --> 00:05:53,610 The margin of it margin from the top. 72 00:05:53,620 --> 00:05:58,660 I've said I want it to drop a hundred and twenty pixels margin from the left. 73 00:05:58,710 --> 00:06:04,820 I want to move to -- 2 9 5 pixels padding from the bottom. 74 00:06:04,830 --> 00:06:12,480 Remember padding is a space inside the element while a margin is a space outside the element so padding 75 00:06:12,510 --> 00:06:22,720 from the bottom 30 pixels padding left 50 pixels pad in top 30 right 65 bodies radio of 25 pixels. 76 00:06:22,800 --> 00:06:28,710 By all means to play around with his values you don't necessarily have to stick to my values just play 77 00:06:28,710 --> 00:06:33,250 around and experiment and see what works for you. 78 00:06:34,050 --> 00:06:42,100 I have had a chunk more of styling from line 43 to fifty seven so forth. 79 00:06:42,120 --> 00:06:45,290 I'll explain 43 to 40 at first. 80 00:06:45,360 --> 00:06:54,360 That is the U L which is the ordered list which I will insert using the using javascript. 81 00:06:54,360 --> 00:07:01,930 Basically these are stylin the lists are what and don't want to have any stylin on the list and said 82 00:07:01,930 --> 00:07:08,480 the text a line still left line height is the space between each text. 83 00:07:08,850 --> 00:07:13,040 Okay and then 949 the idea core task. 84 00:07:13,110 --> 00:07:18,110 So that's where we are shali import to the task. 85 00:07:18,120 --> 00:07:20,710 We want to carry out. 86 00:07:22,700 --> 00:07:32,450 So the task Heidi here life 49 give it a wave of 320 pixels a height of 30 pigs who's the margin from 87 00:07:32,450 --> 00:07:41,900 the left to the left to move 17 pixels and line 54 is the H1 tag which I've given in margin from the 88 00:07:41,900 --> 00:07:42,670 top. 89 00:07:42,770 --> 00:07:47,980 I said I wanted to move 30 pixels from the top. 90 00:07:47,990 --> 00:07:49,540 That's why that means. 91 00:07:50,000 --> 00:07:50,500 Okay. 92 00:07:50,870 --> 00:07:57,530 So that's all our stylin done are just save that week in. 93 00:07:57,540 --> 00:08:00,510 If you have a map and see what it looks like. 94 00:08:00,510 --> 00:08:05,790 All right so this is what the app looks like before the stylin so are just refresh. 95 00:08:05,790 --> 00:08:13,760 And this is what it looks like now after the stylin So it looks much nicer more presentable with the 96 00:08:13,790 --> 00:08:14,780 styling. 97 00:08:14,780 --> 00:08:25,250 So that's it for this styling for this project in the next lechon or be doing the actual javascript 98 00:08:25,250 --> 00:08:29,410 writing javascript code that will make all this work. 99 00:08:29,660 --> 00:08:31,190 Thanks for watching. 100 00:08:31,190 --> 00:08:31,980 Bye for now.